<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>
<script src="echarts4.2.js"></script>
<script src="option.js"></script>
<script src="events-func.js"></script>
<script src="./css/iconfont.js"></script>
<style type="text/css">
    /*adjust list to side-to-side array*/
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: gray
    }

    li {
        float: left;
        padding: 11px;
    }

    li:hover {
        background-color: #484848;
    }

    .form_margin_top {
        margin-top: 30px;
    }

    .textarea {
        height: 150px;
    }
</style>

<body>
    <div class="layui-row">
        <div class="layui-col-md9">
            <div id="container" style="height: 100%" onclick=bg_click()></div>
        </div>
        <div class="layui-col-md3" style='padding: 30px;'>

            节点信息
            <hr class="layui-bg-black">
            <form class="layui-form form_margin_top" action="#">
                <div class="layui-form-item">
                    <label class="layui-form-label">当前节点</label>
                    <div class="layui-input-block">
                        <input name="newItemName" id="newItemName" required lay-verify="required" value="当前节点名称"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">标注信息</label>
                    <div class="layui-input-block">
                        <textarea name="remark" id="remark" placeholder="请输入内容(可选)" class="layui-textarea textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">信息来源</label>
                    <div class="layui-input-inline">
                        <input name="from" id="from" placeholder="请输入内容" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">信息来源位置</div>
                </div>

                <div style="width: 960px;margin-left: auto; margin-right: auto;">

                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <!-- <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
                        <button class="layui-btn layui-btn-radius layui-btn-danger" lay-submit lay-filter="del">
                            删除
                        </button>
                        <button class="layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="edit">
                            编辑
                        </button>
                    </div>
                </div>
            </form>



            新增节点
            <hr class="layui-bg-black">
            <form class="layui-form form_margin_top" action="#">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>新增名称
                    </label>
                    <div class="layui-input-inline">
                        <input name="newItemName" required lay-verify="required" placeholder="请输入内容" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">标注信息</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入内容(可选)" class="layui-textarea textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">信息来源</label>
                    <div class="layui-input-inline">
                        <input name="from" placeholder="请输入内容" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">信息来源位置</div>
                </div>

                <div style="width: 960px;margin-left: auto; margin-right: auto;">

                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="addNode">
                            新增
                        </button>
                    </div>
                </div>
            </form>



            <!-- <div>
                <ul>
                    <li onclick=editNode()><svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-edit"></use>
                        </svg></li>
                    <li onclick=addNode()><svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-add"></use>
                        </svg></li>
                    <li onclick=deleteNode()><svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-subtract"></use>
                        </svg></li>
                </ul>
            </div>
            <div class="add-box" style="padding:3px">

                <div>
                    <label>节点名称</label>
                    <input tabindex="109" id="input1" type="text" autocomplete="off" />
                </div>


                <div><label>节点数值</label>
                    <input tabindex="110" autocomplete="off" /></div>

            </div> -->
        </div>
    </div>
</body>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom)
    //preProcess()
    option = null
    var TimeFn = null                           //avoid click cover dblclick
    var preName = null

    var selectInfo = {
        state: false,
        index: null,
        name: null,
        category: null,
        x: null,
        y: null
    }
    myChart.on('click', selectEle.bind(this))
    myChart.on('dblclick', spreadAndcontract)    //dbl,not "db"

    digui(json);
    console.log(echarts_data)
    console.log(echarts_lins)

    // myChart.setOption(option = {
    //     tooltip: {
    //         trigger: 'item',
    //         triggerOn: 'mousemove'
    //     },
    //     series: [
    //         {
    //             zoom: 2,
    //             type: 'graph',
    //             layout: 'force',

    //             roam: true,
    //             category: categories,
    //             symbolSize: 34,
    //             animationDurationUpdate: 750,

    //             force: {
    //                 repulsion: 140,
    //                 layoutAnimation: false,//是否开启动画
    //                 edgeLength: 50//连接线长度
    //             },
    //         }
    //     ]
    // })

    // optionFromDB.series[0].data[10].fixed = true
    // optionFromDB.series[0].data[10].x = 100
    // optionFromDB.series[0].data[10].y = 100
    myChart.setOption(optionFromDB)

</script>

</html>